<template>
    <div>
        <el-tabs>
            <el-tab-pane label="出库单">
                <el-form :model="outWare" label-width="110px" style="overflow:hidden">
                    <el-form-item prop="emp" label="申请人" class="inline__">
                        <el-input v-model="outWare.emp.empName" :readonly="true"></el-input>
                    </el-form-item>
                    <el-form-item prop="outDan" label="出库单单号" class="inline__">
                        <el-input v-model="outWare.outDan" :readonly="true"></el-input>
                    </el-form-item>
                    <el-form-item prop="outDate" label="申请日期" class="inline__">
                        <el-input :readonly="true">
                            <span style="color:rgb(110,110,110);margin-left: 10px;font-size: 13px" slot="prefix">{{outWare.outDate | format_date}}</span>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="remark" label="备注" class="inline__">
                        <el-input v-model="outWare.remark"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left:130px;">
                        <el-button type="primary" @click="addOut">保存</el-button>
                        <el-button @click="cancel">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane  label="出库产品" >
                <el-button class="is-top" size="small" @click="openDetail"><i class="iconfont icon-jiahao" > 添加产品</i></el-button>
                <el-button class="is-top" size="small" @click="openDeliveryPlan"><i class="iconfont icon-jiahao" > 添加交付计划产品</i></el-button>
                <el-table :data="wareDetailList">
                    <el-table-column prop="proDetail.proDetailId" label="产品编号" align="center"></el-table-column>
                    <el-table-column prop="proDetail.product.productName" label="产品名称" align="center"  > </el-table-column>
                    <el-table-column prop="proDetail.product.productBrand" label="产品品牌" align="center"></el-table-column>
                    <el-table-column prop="proDetail.abilities" label="规格属性" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="s">
                            <span v-for="item in s.row.proDetail.abilities" :key="item.abilityId">{{item.abilityName}} </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="proDetail.wareNum" label="库存数量" align="center"></el-table-column>
                    <el-table-column prop="outNum" label="出库数量" align="center"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="s">
                            <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="delete_product(s.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <!--添加产品-->
        <el-dialog :visible.sync="detail_activeVisitable" width="80%" :close-on-click-modal="false" append-to-body>
            <out_add_product></out_add_product>
        </el-dialog>
        <!--添加交付计划产品-->
        <el-dialog :visible.sync="deliveryPlanVisitable" width="80%" :close-on-click-modal="false" append-to-body>
            <out_add_deliveryPlan></out_add_deliveryPlan>
        </el-dialog>
    </div>
</template>

<script>
    import out_add_product from "./out_add_product";
    import out_add_deliveryPlan from "./out_add_deliveryPlan";

    export default {
        name: "add_out",
        components: {
            out_add_product,out_add_deliveryPlan
        },
        data() {
            return{
                //添加交付计划产品弹框状态
                deliveryPlanVisitable:false,
                //新增出库单产品弹框状态
                detail_activeVisitable:false,
                //新增出库单数据
                outWare:{
                    outId:0,
                    outDan:this.$store.state.vueAppCai.outDan,
                    outDate:new Date,
                    state:0,
                    remark:'',
                    deliveryTime:'',
                    principal:'',
                    deliveryPlanId:0,
                    conDan:'',
                    emp:this.$store.state.user,
                    wareDetail:[]
                },
                //新增出库详情表产品数据
                wareDetailList:[]
            }
        },
        methods:{
            //新增出库单
            addOut(){
                this.outWare.wareDetail =this.wareDetailList;
                window.console.log(this.outWare)
                this.$axios.post("api/ware/add_out",this.outWare)
                    .then(() => {
                        if(this.outWare.deliveryPlanId!=""&&this.outWare.deliveryPlanId!=null&&this.outWare.deliveryPlanId!=0){
                            this.axios.get("api/ware/change-deliveryPlan",{params:{"deliveryPlanId":this.outWare.deliveryPlanId,"isOut":1}})
                                .then(()=>{
                                    window.console.log(this.outWare.deliveryPlanId)
                                }).catch()
                        }
                        this.$store.state.vueAppCai.outVisible = false;
                        this.clearOutWare();
                        if(this.$store.state.vueAppCai.get_out){
                            this.$store.state.vueAppCai.currPage=1;
                            this.$store.state.vueAppCai.get_out(1);
                        }else{
                            this.$router.push({
                                path:"/out_index"
                            })
                        }
                        this.global.mes_success("申请成功");
                    }).catch()
            },
            //打开添加产品弹框
            openDetail(){
                this.detail_activeVisitable = true;
                this.$store.dispatch("setVueDetail",this)
            },
            //打开添加交付计划产品弹框
            openDeliveryPlan(){
                this.deliveryPlanVisitable = true;
                this.$store.dispatch("setVueDetail",this);
            },
            //取消新增
            cancel(){
                this.$store.state.vueAppCai.outVisible = false;
                this.clearOutWare();
            },
            //清空出库单数据
            clearOutWare(){
                this.outWare={
                    outId:0,
                    outDan:this.$store.state.vueAppCai.outDan,
                    outDate:new Date,
                    state:0,
                    remark:'',
                    deliveryTime:'',
                    principal:'',
                    deliveryPlanId:0,
                    conDan:'',
                    emp:this.$store.state.user,
                    wareDetail:[]
                };
                this.wareDetailList=[]
            },
            //删除产品
            delete_product(row){
                this.global.confirm("提示","确认删除？",
                    () => {
                        this.wareDetailList.splice(this.wareDetailList.indexOf(row),1)
                        this.global.mes_success("删除成功")
                    },() => {
                        this.global.mes_message("取消删除")
                    })
            },
        },
        created(){

        }
    }
</script>

<style scoped>
    .el-select{width: 66%!important;}
    .inline__{width:90%!important;display:inline-block}
</style>